Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RadioGroup] Create new RadioGroup component #487

Merged
merged 47 commits into from
Sep 4, 2024

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jul 24, 2024

Closes #26

@atomiks atomiks added the component: radio group This is the name of the generic UI component, not the React module! label Jul 24, 2024
@atomiks atomiks marked this pull request as draft July 24, 2024 05:51
@mui-bot
Copy link

mui-bot commented Jul 24, 2024

Netlify deploy preview

https://deploy-preview-487--base-ui.netlify.app/

Generated by 🚫 dangerJS against ed766a2

@atomiks atomiks marked this pull request as ready for review July 25, 2024 06:55
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 25, 2024
/**
* The unique identifying value of the radio button in the group.
*/
value: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have to enforce strings here. Let's make it any or unknown as in Tabs.

Copy link
Contributor Author

@atomiks atomiks Aug 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A hidden <input> is rendered for the whole RadioGroup root which requires the native DOM type:

{props.name && (
  <input type="hidden" name={props.name} value={checkedItem ?? ''} required={required} />
)}

So we can allow string or number. I don't think anything else needs to be allowed anyway?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to the Select, we can allow arbitrary values here and expose a prop to control how it's serialized.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What valid use cases are there for something other than a string or number?

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 7, 2024
@colmtuite
Copy link
Contributor

@atomiks The docs demo is missing the "indicator", I think that's one (or perhaps the main?) point of confusion. There should be (whatever "should" means) a little dot inside the circle when it's selected. Like this https://helios.hashicorp.design/assets/components/form/radio-card/radio-card-states-2acdd2c7a5775a7479f7c497d3947804.png

@atomiks
Copy link
Contributor Author

atomiks commented Aug 23, 2024

@colmtuite that's just one particular design though. The indicator can be anything, such as a plain filled-in white circle which is an outline when unchecked.

@colmtuite
Copy link
Contributor

@atomiks I don't see the keepMounted prop documented in the component API, am I missing/misunderstanding something?

import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
import { useCompositeListContext } from './CompositeListContext';

export interface UseCompositeListItemParameters {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@atomiks is Composite/CompositeItem intended to be a successor to the current useCompoundParent/Item?

At least for Slider I think this could be a completely replacement for it if we could pass arbitrary metadata into these parameters (for slider it's the id of the associated input element)

BTW the only other component also using useCompound is Tabs, which uses useCompound in a similar way that Accordion needs, I'll try using CompositeList/Item for Accordion first ~

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's a replacement for both them & FloatingList. It can be modified wherever necessary for different components

@atomiks atomiks merged commit 0c87b6e into mui:master Sep 4, 2024
15 of 17 checks passed
@atomiks atomiks deleted the feat/RadioGroup branch September 4, 2024 03:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: radio group This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[RadioGroup] Implement RadioGroup
5 participants